<template>
  <div>
    <el-input v-model="msg"></el-input>
    <el-button @click="submit">提交</el-button>

    聊天内容展示：
    <ul>
      <li v-for="i in melist">{{i}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userid: '',
      ws: null,
      msg: '',
      username: '',
      melist: []
    }
  },
  methods: {
    imitW () {
      this.userid = this.$route.query.userid
      this.username = '用户' + this.userid
      this.ws = new WebSocket('ws://localhost:8000/ws?userid=' + this.userid + '&name=' + this.username)
      this.ws.onopen = function () {
        alert('success')
      }
      this.ws.onmessage = (msg) => {
        var mes = JSON.parse(msg.data)

        this.melist.push(mes['mes'])
      }
    },
    submit () {
      var mes = this.username + '说:' + this.msg
      this.melist.push(mes)
      var sendmes = JSON.stringify({'id': 'kefu', 'mes': mes})
      this.ws.send(sendmes)
    }
  },
  mounted () {
    this.imitW()
  }

}
</script>

<style>

</style>
